<template>

    <!-- 添加或修改对话框 -->
    <lam-dialog :title="title" :visible.sync="open" width="680px" append-to-body @close="cancel">
      <el-form :ref="formRef" :model="form" :rules="rules" label-width="100px" :disabled="formDisabled">
        <el-row>
          <el-col :span="12">
            <el-form-item label="登录账号" prop="username" v-if="operType=='add'" >
              <el-tooltip class="item" effect="dark" content="创建后不可修改" placement="top-start">
                <el-input v-model="form.username" placeholder="请输入用户账户" />
              </el-tooltip>
            </el-form-item>
            <el-form-item label="登录账号" v-else>
              <span>{{form.username}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="真实姓名" prop="realname">
              <el-input v-model="form.realname" clearable placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="昵称" prop="nickName">
              <el-input v-model="form.nickName" clearable placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户类型" prop="userType">
              <lam-dict-select type="select" v-model="form.userType" dictCode="user_type" placeholder="" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" prop="status">
              <lam-dict-select type="radio" v-model="form.status" dictCode="user_status" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="sex">
              <lam-dict-select type="radio" v-model="form.sex" dictCode="sex" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="form.email" clearable placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电话" prop="phone">
              <el-input v-model="form.phone" clearable placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="operType!='add'">
            <el-form-item label="新用户" prop="isNew">
              <lam-dict-select type="radio" v-model="form.isNew" dictCode="yn10" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工号" prop="workNo">
              <el-input v-model="form.workNo" clearable placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="组织机构" prop="deptId">
              <treeselect v-model="form.deptId" :options="treeData" :show-count="true" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职务" prop="post">
              <lam-dict-select v-model="form.post" dictCode="sysPosts" dictType="tableDict" placeholder="" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea" autosize placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" :loading="loading">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </lam-dialog>

</template>

<script>
import {httpGet} from '@/api';
import {listDeptTree} from '@/api/system/dept';
import { EditMixin } from '@/components/mixins/EditMixin';
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "EditUser",
  mixins:[EditMixin],
  components:{
    Treeselect
  },
  data() {
    return {
      url: {
        base: '/sys/user',
        checkUnique: '/sys/user/chkUq/'
      },
      // 表单校验
      rules: {
        username: [{ required: true, message: "登录账号不能为空", trigger: "blur" }, { validator: this.usernameUniqueValidator, trigger: 'blur'}],
        // username: [{ required: true, message: "登录账号不能为空", trigger: "blur" }],
        realname: [{ required: true, message: "真实姓名不能为空", trigger: "blur" }],
        nickName: [{ required: true, message: "昵称不能为空", trigger: "blur" }],
        sex: [{ required: true, message: "性别不能为空", trigger: "blur" }],
        status: [{ required: true, message: "状态不能为空", trigger: "blur" }],
        userType: [{ required: true, message: "用户类型不能为空", trigger: "blur" }],
      },
      treeData:[],
    };
  },
  created() {
    this.loadTreeData();
  },
  methods: {
    // 表单重置
    reset() {
      this.form = {
        username: null,
        realname: null,
        nickName: null,
        sex: 1,
        email: null,
        phone: null,
        status: 1,
        workNo: null,
        post: null,
        deptId: null,
        userType: 2,
        isNew: 0,
        remark: null
      };
    },

    /** 查询下拉树列表 */
    loadTreeData(){
      listDeptTree().then(res => {
        this.treeData = res.data;
      });
    },

    usernameUniqueValidator(rule, value, callback) {
      httpGet(this.url.checkUnique + value).then(res=>{
        callback(res.data === 'true'? undefined : new Error(value+' 已存在'));
      }).catch(res=>{})
    },

    /** 提交按钮 */
    submitForm(){
      this.saveForm(this.url.base);
    }

  }
};
</script>
